<template>
  <div class="question-wrap">
    <div class="question-area">
      <slot name="question" v-bind="question">
        <h4 class="question-area__content">
          {{ `${questionIndex ?? ''}、${question!.question}` }}
        </h4>
      </slot>
    </div>
    <div class="answer-area">
      <slot name="answer" v-bind="question">
        <a-textarea v-model:value="answer" class="answer-area__content"></a-textarea>
      </slot>
    </div>
    <div class="answer-btn-area">
      <a-button type="primary" @click="showCorrectAnswer = !showCorrectAnswer"
        >{{ showCorrectAnswer ? '隐藏' : '查看' }}答案</a-button
      >
      <!-- <a-button type="link" @click="showExplanation = !showExplanation"
      >{{ showExplanation ? '隐藏' : '查看' }}解析</a-button> -->
      <a-button type="link" @click="handleAIQuestion">AI问答解析</a-button>
    </div>
    <div class="correct-answer" v-if="showCorrectAnswer">
      <slot name="correct-answer" v-bind="question">
        <MdPreview
          class="correct-answer_content"
          :id="answerPreviewId"
          :modelValue="question!.answer"
        />
      </slot>
    </div>
    <div class="explanation-area" v-if="showExplanation">
      <slot name="explanation" v-bind="question">
        <MdPreview
          class="explanation-preview"
          :id="explanationPreviewId"
          :modelValue="question!.explanation"
        />
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { ICourseQuestions } from '@/interface/course';
import { useChatStore } from '@/stores/chat';
import { useHomeStore } from '@/stores/home';
import { message } from 'ant-design-vue';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import { ref } from 'vue';

interface IProps {
  questionIndex?: number;
  question?: ICourseQuestions;
}

const props = defineProps<IProps>();
const answer = defineModel('answer', {
  default: '',
});

const answerPreviewId = ref<string>(`answer_preview_${new Date().valueOf()}`);
const explanationPreviewId = ref<string>(`explanation_preview_${new Date().valueOf()}`);

const showExplanation = ref<boolean>(false);
const showCorrectAnswer = ref<boolean>(false);

const chatStore = useChatStore();
const homeStore = useHomeStore();

const handleAIQuestion = () => {
  // 设置侧边栏显示
  homeStore.setShowSideBox(true);

  // 存储当前题目ID到chat store
  if (props.question?.id) {
    const attachments = chatStore.attachmentsGroupedByType;
    if (attachments.question) {
      // 一次只能询问一个问题附件，如果存在则提示用户
      message.warn('一次只能询问一个问题附件');
      return;
    }
    chatStore.addMessageAttachment({
      id: props.question.id,
      name: props.question.question,
      description: homeStore.contentTitle + ' - ' + props.question.question,
      type: 'question',
    });
  }
};
</script>

<style>
.answer-btn-area {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.question-area__content {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 24px;
}

.correct-answer_content,
.explanation-preview {
  border: 1px solid #1890ff;
  border-radius: 8px;
  background-color: #f0f8ff;
  padding: 16px;
}

.correct-answer,
.explanation-area {
  margin-top: 16px;
}
</style>
